<template>
	<div class="container">
		<el-form :model="formData" :rules="rules" ref="formData" label-width="100px" class="demo-formData"
			:hide-required-asterisk='true'>
			<h1>十方智育-后台登录</h1>
			<el-form-item label="用户名" prop="username">
				<el-input v-model="formData.username" prefix-icon='el-icon-user-solid' placeholder="请输入账号"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="userpwd">
				<el-input v-model="formData.userpwd" prefix-icon='el-icon-lock' placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm">立即创建</el-button>
				<el-button @click="resetForm">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			var validateusername = (rule, value, callback) => {
				var regex = /^[a-z]{3,10}$/
				if (value === '') {
					callback(new Error('请输入账号'));
				} else if (!regex.test(value)) {
					callback(new Error('请输入3-10位(a-z)账号'));
				} else {
					callback();
				}
			}
			return {
				formData: {
					username: '',
					userpwd: '',
					source: 0
				},
				rules: {
					username: [{
							required: true,
							validator: validateusername,
							trigger: 'blur',
						}
						// },
						// {
						// 	min: 6,
						// 	max: 15,
						// 	message: '长度在 6 到 15 个字符',
						// 	trigger: 'blur'
						// }
					],
					userpwd: [{
							required: true,
							message: '密码不能为空',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 15,
							message: '长度在 6 到 15 个字符',
							trigger: 'blur'
						}
					]
				}
			};
		},
		methods: {
			submitForm() {
				this.$refs['formData'].validate((valid) => {
					if (valid) {
						this.$ajax.get('login', {
							params: this.formData
						}).then(resp => {
							if (resp.code == 200) {
								sessionStorage.setItem('logonInfe', JSON.stringify(resp.data));
								this.$router.replace('/home');
							} else {
								this.$message.error('账号或密码错误');
							}
						})

					} else {
						this.$message.error('账号或密码格式错误');
					}
				});
			},
			resetForm() {
				this.$refs.formData.resetFields();
			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100vh;
		background: url(../assets/images/logimg.jpg) no-repeat;
		background-size: cover;
		overflow: auto;
	}

	.el-form {
		width: 500px;
		background-color: rgba(255, 255, 255, 0.8);
		padding: 20px 50px;
		margin: 250px auto 0;
		border-radius: 10px;
	}

	.el-form h1 {
		text-align: center;
	}
</style>